<!--零部件管理类的作业指导书，零部件的三不检查指导书，返工返修要领书，拆解件的返修要领书-->

<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!--问题编辑人员：代码：2，可以做问题的修改操作-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh">
        <el-link class="headMain" href="http://10.255.96.48:3404/">{{homepageName}}</el-link>
        <span class="center-text">零部件作业指导书管理</span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-table
              :data="baseComponent"
              border
              style="width: 100%"
              highlight-current-row="highlight-current-row">
            <el-table-column
                type="expand"
                v-slot:default="props">
              <div style="text-align: left;border: 1px solid blue;">
                <div style="margin-top: 5px">零部件图号：</div>
                <div style="margin-top: 5px">{{props.row.partNumber}}</div>
              </div>
              <div style="text-align: left;border: 1px solid blue;">
                <div style="margin-top: 5px">适用机型：</div>
                <div style="margin-top: 5px">{{props.row.partModel}}</div>
              </div>
              <div style="text-align: left;border: 1px solid blue;">
                <div style="margin-top: 5px">供应商名称：</div>
                <div style="margin-top: 5px">{{props.row.supplier}}</div>
              </div>
            </el-table-column>
            <el-table-column
              label="零部件名称"
              prop="partName"
              v-slot:default="copes">
              <div  @click="handleRowClick(copes)" >
                <span>{{copes.row.partName}}</span>
              </div>
            </el-table-column>
          </el-table>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main>
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="三不检验要领书" name="first">
                <div style="height: 69vh;display: flex; width: 100%;">
                  <div style="border: 1px solid blue; flex: 1; height: 100%; box-sizing: border-box;">
                    <div style="display: flex; height: 50px; border: #0269fa solid 1px;text-align: center">
                      <div style="width: 100%; color: red;font-size: 18px; margin-top: 5px">三不作业指导书</div>
                    </div>
                    <div>
                      <div style="width: 100%;margin-top: 5px;">
                        <el-table
                            :data="threeNoBook"
                            border
                            style="width: 100%"
                            height="60vh">
                          <el-table-column
                              type="expand"
                              v-slot:default="props">
                            <div style="margin-right: 10px;margin-left: 20px">
                              <span>失效说明：</span>
                              <span v-if="languageS==='chinese' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[0]}}</span>
                              <span v-else-if="languageS==='english' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[1]}}</span>
                              <span v-else-if="languageS==='russian' && props.row.problem.split('|*|').length===3">{{props.row.problem.split('|*|')[2]}}</span>
                              <span v-else>{{props.row.problem}}</span>
                            </div>
                          </el-table-column>
                          <el-table-column
                              v-slot:default="scope"
                              label="序号"
                              width="50">
                            {{scope.$index+1}}
                            <el-link @click="editBook(2,scope)"><i class="el-icon-download"></i></el-link>
                          </el-table-column>
                          <el-table-column
                              prop="work"
                              label="检查要求"
                              v-slot:default="scope">
                            <span v-if="languageS==='chinese' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[0]}}</span>
                            <span v-else-if="languageS==='english' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[1]}}</span>
                            <span v-else-if="languageS==='russian' && scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[2]}}</span>
                            <span v-else>{{scope.row.work}}</span>
                            <el-link style="margin-left: 20px" @click="editBook(1,scope)"><i class="el-icon-edit"></i></el-link>
                            <el-link style="margin-left: 10px" @click="editBook(3,scope)"><i class="el-icon-delete"></i></el-link>
                          </el-table-column>
                        </el-table>
                      </div >
                    </div>
                  </div>
                  <div style="border: 1px solid blue; flex: 1; height: 100%; box-sizing: border-box;text-align:left">
                    <el-link style="margin-left: 20px" @click="editPicture(1)"><i class="el-icon-edit"></i></el-link>
                    <el-carousel trigger="click" height="62vh">
                      <el-carousel-item v-for="(item, index) in itemView" :key="index">
                        <el-image
                            style="width: 100%; height: 100%"
                            :src="item"
                            fit='contain'></el-image>
                        <el-link></el-link>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="外购件检测要领书" name="second">配置管理</el-tab-pane>
            </el-tabs>
          </el-main>
          <el-footer>
            <el-button plain size="small" @click="chooseLanguage('chinese')">中  文</el-button>
            <el-button plain size="small" @click="chooseLanguage('russian')">Русский язык</el-button>
            <el-button plain size="small" @click="chooseLanguage('english')">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->
    <!--输入两个文本的弹窗类型-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleText"
        width="50%"
        :before-close="handleClose">
      <div style="text-align: left">
        <span style="font-size: 18px">{{prompt1}}</span>
        <el-input placeholder="请输入内容"
                  v-model="inputText1"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="3"></el-input>
      </div>
      <div style="margin-top: 10px;text-align: left">
        <span style="font-size: 18px">{{prompt2}}</span>
        <el-input placeholder="请输入内容"
                  v-model="inputText2"
                  style="width: 100%;margin-top: 8px"
                  type="textarea"
                  :rows="3"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleText = false">取 消</el-button>
    <el-button type="primary" @click="saveDataTextTwo">确 定</el-button>
  </span>
    </el-dialog>
    <!--点击上传照片-->
    <el-dialog
        :visible.sync="dialogPicture"
        :title="titleUse">
      <div style="margin-top: 10px;text-align: center; border: 1px solid #0269fa;padding: 10px">
        <el-upload
            action="http://10.255.96.48:3499/russiaEngine/"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="(file, fileList) => saveFileAnnex(file, fileList)"
            :file-list="PictureList" >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
          </div>
        </el-upload>
      </div>
    </el-dialog>
    <!--点击上传照片中的放大按钮，查看照片-->
    <el-dialog :visible.sync="dialogPictureAnnex">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <!--抽屉放置区域-->
  </div>
</template>

<script>

import _ from "lodash";
import {filepath} from "@/configUse";

export default {
  name: "componentGuideBook",
  components: {},
  data() {
    return {
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限
      //语言选择的变量
      languageS:'chinese',
      homepageName:'俄罗斯动力质量管理系统',//主页变化的语言选择

      //分页用到的变量
      activeName:'first',
      //记录用户现在选择的是那个表，默认的是三不检查指导书
      tabIndex:0,
      //零部件明细表
      baseComponent:[
        {
          id: '',
          //零部件图号
          partNumber:'',
          //零部件名称
          partName:'',
          //适用机型
          partModel:'',
          //记录供应商名称
          supplier:'',
          //排序索引
          sortIndex:'',
          //创建时间
          establishTime:'',
          //修改时间
          UpdateTime:'',
        }
      ],
      //用在单击导航结构，记录导航索引的项目
      currentRowIndex: null, // 用于跟踪当前选中的行索引
      treeRow:{},//用户点击的那个总表那个零部件的行
      componentBookRow:null,//用户选择的是零部件作业管理的行信息.

      //三不作业指导书用到的变量
      threeNoBook:[
        {
          id:0,
          work:'请编辑',
          problem:'请输入'
        }
      ],
      //用户选择出的三不检查作业指导书id值是多少
      threeNoBookId:0,
      //用户选择的类型是什么，是那个类型的编辑或者插入活动
      editBookType:0,//1.三不检查指导书的编辑操作；2.三不检查指导书的插入操作；3.三不检查指导书的删除一条记录

      //整体控件用到的变量
      //用户点击了那一行，把整个行的变量传递出来
      scopeEdit:null,
      //弹窗用到的变量
      //弹窗的提示
      titleUse:'提示',
      //弹窗显示控制：
      dialogVisibleText:false,//双文本的录入
      dialogPicture:false,//编辑、查看照片
      dialogPictureAnnex:false,//显示图片的弹窗
      inputText1:'请输入',//用到的第一个文本信息；
      inputText2:'请输入',//用到的第二个文本信息；
      prompt1:'提示',//弹框内用到的提示1
      prompt2:'提示',//弹框内用到的提示1

      //图片相关的数据
      itemView:[],//展示图片了路径,用在了走马灯部位
      editPictureType:0,//修改图片的类型，主要记录了
      PictureList:[],//图片文件的
      disabled:false,//图片显示的控制变量
      dialogImageUrl:'',//弹窗显示的图片路径
    }
  },
  watch: {},
  methods: {
    //语言选择的函数
    chooseLanguage(language){
      this.languageS=language
      if (language==='chinese'){
        this.homepageName='俄罗斯动力质量管理系统'
      }
      else if (language==='russian'){
        this.homepageName=' Система качества двигателей'
      }
      else if (language==='english'){
        this.homepageName='Russian Engine Quality Management System'
      }
    },
    // 通用，弹窗关闭的时候
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'equipmentMaintain',
        userId:useId,
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          this.useName=result.data.name
          this.usePower=result.data.equipmentMaintain
          this.useId=useId
          console.log(this.useId,this.usePower,this.useName)
        }
      })
    },
    //在tab控件上单击的函数
    handleClick(tab) {
      this.tabIndex=tab.index
    },
    // 处理行点击事件,单击的是导航栏的零部件信息
    handleRowClick(row) {
      // 更新当前行索引
      this.currentRowIndex = row.$index; //这是总表的数据
      this.treeRow=row.row//这是总表点击行的行信息
      //向后端查询不同的数据，需要根据baseId查询
      if (this.tabIndex===0){
        //现在用户展示的是三不检查指导书，向后端发送请求，进行数据调取
        this.$request.post('/inquiryByFieldAndBaseId',{
          baseId:row.row.id,
          field:'threeNoBook',
        }).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }
          else {
            //把用户选择的三不检查指导书所在行的id传递出去
            this.threeNoBookId=result.data.id
            //把用户选择的零部件指导书的所有信息都传递出去
            this.componentBookRow=result.data
            //把数据进行分割
            const temp=result.data.threeNoBook.split('|&|')
            const tempWork=temp[0].split('|%|')
            const tempProblem=temp[1].split('|%|')
            //数据进行循环，并且进行组合
            this.threeNoBook=[]
            if (tempWork.length===tempProblem.length){
              for (let i = 0; i < tempWork.length-1; i++) {
                let tempAll={
                  id:i,
                  work:tempWork[i],
                  problem:tempProblem[i],
                }
                this.threeNoBook.push(tempAll)
              }
            }
            else {
              alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
            }
            //给走马灯图片做组合，完成图片的数据显示
            this.itemView=[]
            const temp1=this.componentBookRow.threeNoBookAnnex.split('|*|')
            for (let i = 0; i < temp1.length-1; i++) {
              this.itemView.push(filepath+temp1[i])
            }
          }
        })
      }
    },
    //编辑要领书点击，准备弹窗进行编辑
    editBook(doe,scope){
      //把用户选择的是那个操作传递出去
      this.editBookType=doe//1.用户选择的是三不检查作业指导书的编辑操作
      //把点击的数据传递出去
      this.scopeEdit=scope
      if (this.tabIndex===0){
        if (this.editBookType===1){
          //是三不检查指导书的编辑
          this.titleUse='您正在编辑《三不检查指导书》'
          this.prompt1='请输入检查内容：'
          this.prompt2='请输入失效后果提示：'
          this.inputText1=_.cloneDeep(scope.row.work)
          this.inputText2=_.cloneDeep(scope.row.problem)
          this.dialogVisibleText=true
        }
        else if (this.editBookType===2){
          //是三不检查指导书的插入
          this.titleUse='您正在插入一条《三不检查指导书》的内容'
          this.prompt1='请输入检查内容：'
          this.prompt2='请输入失效后果提示：'
          this.inputText1=''
          this.inputText2=''
          this.dialogVisibleText=true
        }
        else if (this.editBookType===3){
          //是三不检查指导书的编辑
          this.titleUse='您正在删除本条《三不检查指导书》内容'
          this.prompt1='请确认删除的检查内容：'
          this.prompt2='请确认删除的失效后果提示：'
          this.inputText1=_.cloneDeep(scope.row.work)
          this.inputText2=_.cloneDeep(scope.row.problem)
          this.dialogVisibleText=true
        }
      }
    },
    //点击的是两个文本数据的保存类型
    saveDataTextTwo(){
      if (this.tabIndex===0){
        //编辑的是三不作业指导书中的内容
        if (this.editBookType===1){
          //三不指导书的《编辑操作》
          // 判断用户输入的数据是否为空,并组合新数据
          if (this.inputText1===''){
            this.inputText1='请编辑确认步骤'
          }
          if (this.inputText2===''){
            this.inputText2='请编辑失效模式'
          }
          //组合数据
          //向总数据中进行组合
          let temp=_.cloneDeep(this.threeNoBook)
          temp[this.scopeEdit.$index].work=this.inputText1
          temp[this.scopeEdit.$index].problem=this.inputText2
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|&|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|&|'
          this.dialogVisibleText=false
          //向后端发送请求，保存数据，发id，修改的字段名，修改的字段值
          this.$request.post('editComponentBookByIDByField',{
            id:this.threeNoBookId,
            fieldName:'threeNoBook',
            fieldVal:strTemp,
          })
              .then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            } else {
              //对新数据进行重新编辑
              //把数据进行分割
              const temp=result.data.split('|&|')
              const tempWork=temp[0].split('|%|')
              const tempProblem=temp[1].split('|%|')
              //数据进行循环，并且进行组合
              this.threeNoBook=[]
              if (tempWork.length===tempProblem.length){
                for (let i = 0; i < tempWork.length-1; i++) {
                  let tempAll={
                    id:i,
                    work:tempWork[i],
                    problem:tempProblem[i],
                  }
                  this.threeNoBook.push(tempAll)
                }
              }
              else {
                alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
              }
            }
          })
        }
        else if (this.editBookType===2){
          //三不指导书的《插入操作》
          // 判断用户输入的数据是否为空,并组合新数据
          if (this.inputText1===''){
            this.inputText1='请编辑确认步骤'
          }
          if (this.inputText2===''){
            this.inputText2='请编辑失效模式'
          }
          //组合数据
          //向总数据中进行组合
          let temp=_.cloneDeep(this.threeNoBook)
          temp.splice(this.scopeEdit.$index+1,0,{id:0,
            work:this.inputText1,
            problem:this.inputText2})
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|&|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|&|'
          //向后端发送请求，保存数据，发id，修改的字段名，修改的字段值
          this.$request.post('editComponentBookByIDByField',{
            id:this.threeNoBookId,
            fieldName:'threeNoBook',
            fieldVal:strTemp,
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  //对新数据进行重新编辑
                  //把数据进行分割
                  const temp=result.data.split('|&|')
                  const tempWork=temp[0].split('|%|')
                  const tempProblem=temp[1].split('|%|')
                  //数据进行循环，并且进行组合
                  this.threeNoBook=[]
                  if (tempWork.length===tempProblem.length){
                    for (let i = 0; i < tempWork.length-1; i++) {
                      let tempAll={
                        id:i,
                        work:tempWork[i],
                        problem:tempProblem[i],
                      }
                      this.threeNoBook.push(tempAll)
                    }
                  }
                  else {
                    alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
                  }
                }
              })
          this.dialogVisibleText=false
        }
        else if (this.editBookType===3){
          //三不指导书的《删除操作》
          //向总数据中进行组合
          let temp=_.cloneDeep(this.threeNoBook)
          temp.splice(this.scopeEdit.$index,1)
          //组合成文本数据
          let strTemp=''
          //组合确认项目的数据
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].work+'|%|'
          }
          //增加确认项目和失效分析间隔
          strTemp=strTemp+'|&|'
          //组合失效分析
          for (let i = 0; i < temp.length; i++) {
            strTemp=strTemp+temp[i].problem+'|%|'
          }
          strTemp=strTemp+'|&|'
          //向后端发送请求，保存数据，发id，修改的字段名，修改的字段值
          this.$request.post('editComponentBookByIDByField',{
            id:this.threeNoBookId,
            fieldName:'threeNoBook',
            fieldVal:strTemp,
          })
              .then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  //对新数据进行重新编辑
                  //把数据进行分割
                  const temp=result.data.split('|&|')
                  const tempWork=temp[0].split('|%|')
                  const tempProblem=temp[1].split('|%|')
                  //数据进行循环，并且进行组合
                  this.threeNoBook=[]
                  if (tempWork.length===tempProblem.length){
                    for (let i = 0; i < tempWork.length-1; i++) {
                      let tempAll={
                        id:i,
                        work:tempWork[i],
                        problem:tempProblem[i],
                      }
                      this.threeNoBook.push(tempAll)
                    }
                  }
                  else {
                    alert("程序出错，三不指导书的确认项目和失效分析不对应，请联系管理员")
                  }
                }
              })
          this.dialogVisibleText=false
        }
      }
    },
    // 修改图片的函数弹窗控制函数,准备弹窗
    editPicture(doe){
      this.editPictureType=doe
      //准备弹窗，进行文件上传
      if (this.tabIndex===0){
        if (this.currentRowIndex===null){
          alert("未选择零部件，请先选择零部件")
        }
        else {
          //在三不作业指导书中编辑的图片
          if (doe===1) {
            //编辑的1号位置（三不作业指导书的照片）
            //组合照片的数据
            this.PictureList = []
            if (this.componentBookRow.threeNoBookAnnex.includes('|*|')){
              const temp1 = this.componentBookRow.threeNoBookAnnex.split('|*|')
              for (let i = 0; i < temp1.length - 1; i++) {
                let temp2 = {
                  name: temp1[i],
                  percentage: 0,
                  raw: File,
                  size: 0,
                  status: null,
                  uid: null,
                  url: filepath + temp1[i]
                }
                this.PictureList.push(temp2)
              }
            }
          }
          this.dialogPicture = true
        }
      }
    },
    /*图片相关的函数*/
    //保存并上传加图片
    saveFileAnnex(file, fileList){
      console.log(fileList)
      this.PictureList.push(file)
      //判断用户是哪个文件操作
      if (this.tabIndex===0){
        //在三不作业指导书页面进行操作
        if (this.editPictureType===1){
          //1.代表要对三不作业指导书中的图片进行添加
          const formData = new FormData()
          //把文件数据放进去
          formData.append('file', file.raw)
          //把原来的图片字符串放进去，作为修改用
          formData.append('id',this.componentBookRow.id)
          formData.append('fieldName','threeNoBookAnnex')
          formData.append('fieldVal',this.componentBookRow.threeNoBookAnnex)
          //保存文件，需要返回修改后的图片地址保存数据，并并且进行赋值
          this.$requestFile.post('/componentPicture',formData).
          then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }else {
              if (result.data===null){
                alert("程序出现异常，请联系管理员")
              }else {
                //修改列表中的数据
                console.log(result.data)
                //修改记录的单击的零部件表的行信息的内容
                this.componentBookRow.threeNoBookAnnex=result.data
                //修改走马灯的图片数组
                //给图片做组合，完成图片的数据显示
                this.itemView=[]
                const temp1=result.data.split('|*|')
                for (let i = 0; i < temp1.length-1; i++) {
                  this.itemView.push(filepath+temp1[i])
                }
              }
            }
          })
        }
      }
    },
    //点击查看照片的函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogPictureAnnex = true;
    },
    //点击图片下载按钮
    handleDownload(file) {
      //向后端发送请求，下载文件
      this.$request.get('/oilDownload?fileName=' + encodeURIComponent(file.name)).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }
        else {
          let base64Data = 'data:application/octet-stream;base64,' + result.data//
          // 创建一个Blob对象
          let blob = this.dataURItoBlob(base64Data);
          // 触发下载
          this.downloadBlob(blob, file.name);
        }
      }).catch(error => {
        // 处理请求错误
        console.error("请求出错", error);
      })
    },
    //照片移除的函数
    handleRemove(file) {
      //判断用户是要删除哪里的图片
      if (this.tabIndex===0){
        console.log(this.tabIndex,this.editBookType)
        //是在三不作业指导书内的图片
        if (this.editPictureType===1){
          //是三不作业指导书中的图片，代号1
          const index = this.PictureList.findIndex(item => item.name === file.name);
          this.PictureList.splice(index,1)
          //发送请求，执行删除文件，发送的是这一行的id，记录图片地址的字符串，以及需要修改的字段，为了减少后端的写的代码，重新返回新的文件名的序列内容，并且更新。
          //组合数据，首先得到删除文件后的数据。
          let temp = this.componentBookRow.threeNoBookAnnex.replace(file.name+'|*|','')
          this.$request.post('/componentPictureRemove',{
            id:this.componentBookRow.id,
            fieldName:'threeNoBookAnnex',
            filedVal:temp,
            pictureName:file.name
          }).
          then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }
            else {
              if (result.data==='删除文件时出错'){
                alert("删除文件出错，请联系管理员")
              }else {
                //更新数据
                //修改列表中的数据
                this.componentBookRow.threeNoBookAnnex=result.data
                //组合照片的数据
                this.PictureList=[]//组合文件上传窗口的图片列表
                this.itemView=[]//修改走马灯的图片数组
                const temp1=result.data.split('|*|')
                for (let i = 0; i < temp1.length-1; i++) {
                  let temp2 = {
                    name: temp1[i],
                    percentage: 0,
                    raw: File,
                    size: 0,
                    status: null,
                    uid: null,
                    url: filepath + temp1[i]
                  }
                  this.PictureList.push(temp2)
                  this.itemView.push(filepath+temp1[i])
                }
              }
            }
          })
        }
      }
    },
    // 辅助函数：将Base64编码的字符串转换为Blob对象
    dataURItoBlob(dataURI) {
      // 分离出头部信息,得到数据部分
      let byteString;
      if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
      else
        byteString = unescape(dataURI.split(',')[1]);

      // 写入数组缓冲区
      let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      let ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], {type:mimeString});
    },
    // 辅助函数：触发Blob对象的下载
    downloadBlob(blob, fileName) {
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
    },
  },
  mounted() {
    //数据归零
    this.threeNoBook=[]
    //调用用户权限
    this.inquiry()
    //向后端发送请求，选出零部件名称，进行导航展示
    this.baseComponent=[]
    //向后端发送请求，重新查询所有的列表
    this.$request.post('queryAllBaseComponent').then(result1=>{
      if (result1.code === 401) {
        this.$router.push('UserLogin')
        alert("您未登录，请登录")
      } else {
        this.baseComponent=[]
        this.baseComponent=result1.data
      }
    })
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}
.highlight {
  background-color: #f0f0f0; /* 灰色背景色 */
}

/*自定义样式*/

</style>